{extend name="layout/layout" /}

{block name="style"}
	<style>

		.category-goods .mui-col-xs-6{
			padding: 5px;
		}

		.category-goods .goods-item{
			background: #fff;
		}


		.category-goods .price{
			color:#e60012;
		}

		.category-goods .price, .category-goods .del-price{
			font-size: 12px;
		}

		.goods-name{
			font-size:12px;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			text-align: left;
			height: 40px;
		}

		.goods-img{
			height: 180px;
		}

		.goods-info{
			padding: 5px;
		}

		button.mui-btn-danger{
			background: #E02E24;
			border-radius: 0;
			width: 100%;
		}

		.coupon_icon{
			border: 1px solid #E92F3C;
			color: #E92F3C;
			padding: 3px;
			font-size: 12px;
		}

		.search{
			margin:5px 0;
			background: #fff;
		}


		.search{
			padding: 10px;
		}

		.search input{
			margin: 0;
			padding: 0 15px;
			border-radius: 0;
			border-right: 0;
		}

		.search-icon{
			height: 40px;
			border: 1px solid rgba(0,0,0,.2);
			line-height: 40px;

		} 
	</style>
{/block}

{block name="main"}
	<div class="category-goods mui-row" v-cloak>
		<div class="search mui-row">
			<div class="input-box mui-col-xs-10">
				<input type="text" id="keyword" v-model="keyword" autofocus="autofocus" placeholder="商品名称" >
			</div>
			<div class="mui-col-xs-2 mui-text-center search-icon">
				<a class="mui-icon mui-icon-search" href="javascript:;" @tap="search()"></a>
			</div>
		</div>

		<div class="box" id="box">
			<div>
				<div class="mui-row"  v-if="list.length > 0">
					<div class="mui-col-xs-6" v-for="item in list">
						<div class="goods-item">
							<a @tap="toDetail(item.goods_id)" >
								<div class="goods-img">
									<img :src="item.goods_thumbnail_url" alt="" class="img-responsive">
								</div>
								<div class="goods-info">
									<p class="goods-name">{{item.goods_name}}</p>
									<p class="">
										<span class="coupon_icon">用券价</span>
										<b class="price">￥{{(item.min_normal_price-item.coupon_discount)/100}}</b>
										<del class="del-price mui-pull-right">￥{{item.min_normal_price/100}}</del>
										
									</p>
									<button class="mui-btn mui-btn-danger">一键抢券</button>
								</div>
							</a>
						</div>
					</div>
				</div>
				<div class="no-data" v-else>没有相关商品</div>
			</div>
		</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
		mui.init({
		  pullRefresh : {
		    container:"#box",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      auto: false,//可选,默认false.首次加载自动上拉刷新一次
		      callback :function(){
		      	console.log('down');
		      	indexVue.list = [];
		      	indexVue.page = 1;
		      	indexVue.nextPage = false;
		      	// mui('#pullup-container').pullRefresh().refresh(true);

		      	indexVue.getGoods();
		      	// mui('.group-goods').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      auto:true,//可选,默认false.自动上拉加载一次
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	indexVue.getGoods();
		      	this.endPullupToRefresh(indexVue.nextPage);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});

		var indexVue = new Vue({
			el:'.category-goods',
			data: {
				keyword: '',
				list: [],
				page:1,
				nextPage: false
			},
			mounted: function(){
                if(!token){
                    location.href = '/mobile/user/login';
                }
				// this.getGoods();
			},
			methods: {
				//获取商品列表
				getGoods: function(){
					var that = this;
					var keyword = this.keyword;
					console.log(keyword);
					var url =  'pdd/goodsList';
					request(that, {'url': url, 'data': {'keyword':keyword, 'page': that.page}}, function(res){
						if(res.code == 200) {
							that.list = that.list.concat(res.data.goods_list);
							that.page++;
							if(res.data.goods_list.length < 100) {
								that.nextPage = true;
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},

                //搜索
                search: function(){
                    var keyword = this.keyword;
                    if(!keyword){
                        mui.alert('请输入商品名称'); return;
                    }

                    this.page = 1;
                    this.list = [];
                    this.getGoods();
                },
                toDetail: function(id) {
                	location.href = '/mobile/pdd/detail/id/'+id;
                }
			}
		});
	</script>
{/block}